<template>
<div>
    <Row class="mt10">
        <Table border :columns="columns" :data="data" ref="table" class="mt10"></Table>
    </Row>
</div>
</template>

<script>
export default {
    name: 'table-rowspan',
    data() {
        function renderCell(h, v) {
            if (v < 60) {
                return h(
                    'div', {
                        // style: {
                        //     'color': 'red'
                        // }
                        class:'lt60Em'
                    },
                    v
                )
            }else {
                return h(
                    'div', {},
                    v
                )
            }
        }
        return {
            data: [],
            columns: [{
                    title: '班级',
                    key: 'className',
                    align: 'center',
                    
                },
                {
                    title: '英语',
                    key: 'english',
                    align: 'center',
                    render: (h, params) => {
                        var value = params.row[params.column.key]
                        return renderCell(h, value)
                    }
                },
                {
                    title: '语文',
                    key: 'chinese',
                    align: 'center',
                    render: (h, params) => {
                        var value = params.row[params.column.key]
                        return renderCell(h, value)
                    }
                },

            ]
        }
    },
    mounted() {
        this.init()
    },
    methods: {
        init() {
            this.getDataList()
        },
        getDataList() {
            this.data = new Array(5).fill({
                className: '16级国商1',
                english: 58,
                chinese: 70
            })
        }
    }
}
</script>

<style lang="less">
.lt60Em{
  color: red;
}
</style>
